<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">			
			<block slot="content">分页测试</block>
		</cu-custom>
		<view class="cu-list menu-avatar margin-top" >
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
			  @click="toSignRoom(item.name)">
				<view class="cu-avatar round lg" :style="[{backgroundImage:`url(${item.img})` }]"></view>
				<view class="content">
					<view class="text-cut">{{item.name}} </view>
					<!-- <view class="text-gray text-sm">
						<text class="cuIcon-infofill text-red  margin-right-xs"></text>
						{{item.content}}
					</view> -->
					<view class="text-gray text-sm flex"> <view class="text-cut">{{item.content}}</view></view>
				</view>
				<view class="action date-label">
					<view class="text-grey text-sm">{{item.careteDate}}</view>
					<!-- <view class="cu-tag round bg-grey sm">5</view> -->
				</view>
			</view>
		</view>
		<view class="bg-">
			<pagination 
				:current-page="currentPage"
				:page-size="pageSize"
				@current-change="pageChange"
				@size-change="handleSizeChange"
				:pagerCount="5" 
				:total="total"
				background
				round
				:pageSizes="[10, 20, 40, 80, 100]"
				layout="total, sizes, jumper"
			>
			</pagination>
		</view>	

	</view>
</template>

<script>
	import pagination from '@/components/pagination/pagination'
	export default {
		components: {
			pagination
		},
		data() {
			return {
				currentPage: 1,
				pageSize: 10,
				total: 68,
				list: [
					{
						careteDate: "2019年6月23日",
						content: "张三、李四等成员",
						name: "唐老鸭签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2018年12月12日",
						content: "夏天、冬天、取暖。",
						name: "梦幻签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2018年10月6日",
						content: "张三、李四等成员",
						name: "璐璐签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2019年6月23日",
						content: "张三、李四等成员",
						name: "唐老鸭签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2018年12月12日",
						content: "夏天、冬天、取暖。",
						name: "梦幻签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2018年10月6日",
						content: "张三、李四等成员",
						name: "璐璐签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2019年6月23日",
						content: "张三、李四等成员",
						name: "唐老鸭签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						careteDate: "2018年12月12日",
						content: "夏天、冬天、取暖。",
						name: "梦幻签约室",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					}
				]
			}
		},
		methods: {
			pageChange(val) {
				this.currentPage = val
			},
			handleSizeChange(val) {
				this.pageSize = val
			}
		}
	}
</script>

<style scoped>
.date-label {
	width: 182upx !important;
}
</style>
